Upload.js ➔ initDropzone - Code Metrics - Inspection of "update dropzone" - o2system/venus-form - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — master ( 84f40e...d13fa5 )

unknown

created 2019-04-30 09:35 UTC

Upload.js ➔ initDropzone B

↳ Parent: Project

Complexity

Conditions	4
Paths	170

Size

Total Lines	155
Code Lines	105

Duplication

Lines	29
Ratio	18.71 %

Importance

Changes	5
Bugs	1	Features	0

Metric	Value
cc	4
eloc	105
c	5
b	1
f	0
nc	170
nop	0
dl	29
loc	155
rs	7

How to fix Long Method

/**
 * This file is part of the O2System Venus UI Framework package.
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 *
 * @author         Steeve Andrian Salim
 * @copyright      Copyright (c) Steeve Andrian Salim
 */
// ------------------------------------------------------------------------

import * as $ from 'jquery';
import * as Dropzone from 'dropzone';
import 'dropify/dist/js/dropify';

/**
 * Class Upload
 *
 * @author          Teguh Rianto
 * @package         Components
 */
export default class Upload {
    constructor() {
        /**
         * Init dropzone
         */
        this.initDropzone();

        /**
         * Init dropify
         */
        this.initDropify();
    }

    initDropzone() {
        if (typeof Dropzone != 'undefined') {
            Dropzone.autoDiscover = false;

            // Cards version
            const dropzoneCards = $('#dropzone-cards');
            if(dropzoneCards.length) {

                let dropzoneCardsActionUrl = dropzoneCards.data('action-url');

                let dropzoneCardsFilePreview = dropzoneCardsElement.find('#dropzone-cards-template');
                dropzoneCardsFilePreview.removeAttr('id');

                let dropzoneCardsFilePreviewTemplate = dropzoneCardsFilePreview.parent().html();
                dropzoneCardsFilePreview.parent().remove();

<<<<<<< HEAD
                let dropzoneCards = new Dropzone('#dropzone-cards-form', {
=======
                let dropzoneCardForms = $('#dropzone-cards-form').dropzone({
>>>>>>> 84f40ef6f93308c89dd599def41a82864d990f58
                    url: dropzoneCardsActionUrl,
                    autoProcessQueue: true,
                    thumbnailWidth: null,
                    thumbnailHeight: null,
                    previewTemplate: dropzoneCardsFilePreviewTemplate
                });

                dropzoneCards.on("addedfile", function (file) {
                    var fileId = 'media' + document.querySelectorAll('.media-list-item').length;
                    file.previewElement.getElementsByTagName('input')[0].setAttribute('id', fileId);
                    file.previewElement.getElementsByTagName('label')[0].setAttribute('for', fileId);

                    var imagesFileTypes = ['image/png', 'image/jpg', 'image/jpeg', 'image/gif'];
                    if (imagesFileTypes.indexOf(file.type) != -1) {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'none';
                    } else if (file.type === 'application/pdf') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-pdf"></i>';
                    } else if (file.type === 'application/doc' | 'application/docx') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-word"></i>';
                    } else if (file.type === 'application/ppt' | 'application/pptx') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-powerpoint"></i>';
                    } else if (file.type === 'video/mp4' | 'video/webm' | 'video/mkv') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-video"></i>';
                    } else if (file.type === 'audio/mpeg') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-audio"></i>';
                    } else {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file"></i>';
                    }
                });

                dropzoneCards.on("success", function (file, resp) {
                    file.previewElement.querySelector(".media-list-item").classList.remove('uploading');
                    file.previewElement.querySelector(".upload-progress").style.display = 'none';
                    file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
                });

                dropzoneCards.on("error", function (file) {
                    file.previewElement.querySelector(".media-list-item").classList.remove('uploading');
                    file.previewElement.querySelector(".upload-progress").style.display = 'none';
                    file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
                });
            }

            // Table version
            const dropzoneTable = $('#dropzone-table');
            if(dropzoneTable.length) {

                let dropzoneTableActionUrl = dropzoneTable.data('action-url');

                let dropzoneTableFilePreview = dropzoneTableElement.find('#dropzone-table-template');
                dropzoneTableFilePreview.removeAttr('id');

                let dropzoneTableFilePreviewTemplate = dropzoneTableFilePreview.parent().html();
                dropzoneTableFilePreview.parent().remove();

                let dropzoneTable = new Dropzone('#dropzone-table-form', {
                    url: dropzoneTableActionUrl,
                    autoProcessQueue: false,
                    thumbnailWidth: null,
                    thumbnailHeight: null,
                    previewTemplate: dropzoneTableFilePreviewTemplate, // Define the container to display the previews
                    previewsContainer: ".media-list-table",
                    clickable: "#dropzone-add-file", // Define the element that should be used as click trigger to select files.
                });
                
                dropzoneTable.on("addedfile", function (file) {
                    console.log('test');
                    var imagesFileTypes = ['image/png', 'image/jpg', 'image/jpeg', 'image/gif'];
                    if (imagesFileTypes.indexOf(file.type) != -1) {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'none';
                    } else if (file.type === 'application/pdf') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-pdf"></i>';
                    } else if (file.type === 'application/doc' | 'application/docx') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-word"></i>';
                    } else if (file.type === 'application/ppt' | 'application/pptx') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-powerpoint"></i>';
                    } else if (file.type === 'video/mp4' | 'video/webm' | 'video/mkv') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-video"></i>';
                    } else if (file.type === 'audio/mpeg') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-audio"></i>';
                    } else {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file"></i>';
                    }
                    // Hookup the start button
                    file.previewElement.querySelector(".start").onclick = function() { dropzoneTable.enqueueFile(file); };
                });

                dropzoneTable.on("totaluploadprogress", function(progress) {
                    document.querySelector("#dropzone-table-total-progress .progress-bar").style.width = progress + "%";
                });

                dropzoneTable.on("sending", function(file) {
                    // Show the total progress bar when upload starts
                    document.querySelector("#dropzone-table-total-progress").style.opacity = "1";
                    // And disable the start button
                    file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
                });

                dropzoneTable.on("success", function (file, resp) {
                    file.previewElement.querySelector(".upload-progress").style.display = 'none';
                    file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
                });

                dropzoneTable.on("error", function (file) {
                    file.previewElement.querySelector(".upload-progress").style.display = 'none';
                    file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
                });

                dropzoneTable.on("queuecomplete", function(progress) {
                    document.querySelector("#dropzone-table-total-progress").style.opacity = "0";
                });

                // Setup the buttons for all transfers
                // The "add files" button doesn't need to be setup because the config
                // `clickable` has already been specified.
                document.querySelector("#dropzone-table-actions .start").onclick = function() {
                    dropzoneTable.enqueueFiles(dropzoneTable.getFilesWithStatus(Dropzone.ADDED));
                };

                document.querySelector("#dropzone-table-actions .cancel").onclick = function() {
                    dropzoneTable.removeAllFiles(true);
                };
            }
        }
    }

    initDropify(){
        $('.dropify').dropify();
    }
}

1			/**
2			* This file is part of the O2System Venus UI Framework package.
3			*
4			* For the full copyright and license information, please view the LICENSE
5			* file that was distributed with this source code.
6			*
7			* @author Steeve Andrian Salim
8			* @copyright Copyright (c) Steeve Andrian Salim
9			*/
10			// ------------------------------------------------------------------------
11
12			import * as $ from 'jquery';
13			import * as Dropzone from 'dropzone';
14			import 'dropify/dist/js/dropify';
15
16			/**
17			* Class Upload
18			*
19			* @author Teguh Rianto
20			* @package Components
21			*/
22			export default class Upload {
23			constructor() {
24			/**
25			* Init dropzone
26			*/
27			this.initDropzone();
28
29			/**
30			* Init dropify
31			*/
32			this.initDropify();
33			}
34
35			initDropzone() {
36			if (typeof Dropzone != 'undefined') {
37			Dropzone.autoDiscover = false;
38
39			// Cards version
40			const dropzoneCards = $('#dropzone-cards');
41			if(dropzoneCards.length) {
42
43			let dropzoneCardsActionUrl = dropzoneCards.data('action-url');
44
45			let dropzoneCardsFilePreview = dropzoneCardsElement.find('#dropzone-cards-template');
46			dropzoneCardsFilePreview.removeAttr('id');
47
48			let dropzoneCardsFilePreviewTemplate = dropzoneCardsFilePreview.parent().html();
49			dropzoneCardsFilePreview.parent().remove();
50
51			<<<<<<< HEAD
52			let dropzoneCards = new Dropzone('#dropzone-cards-form', {
53			=======
54			let dropzoneCardForms = $('#dropzone-cards-form').dropzone({
55			>>>>>>> 84f40ef6f93308c89dd599def41a82864d990f58
56			url: dropzoneCardsActionUrl,
57			autoProcessQueue: true,
58			thumbnailWidth: null,
59			thumbnailHeight: null,
60			previewTemplate: dropzoneCardsFilePreviewTemplate
61			});
62
63			dropzoneCards.on("addedfile", function (file) {
64			var fileId = 'media' + document.querySelectorAll('.media-list-item').length;
65			file.previewElement.getElementsByTagName('input')[0].setAttribute('id', fileId);
66			file.previewElement.getElementsByTagName('label')[0].setAttribute('for', fileId);
67
68			var imagesFileTypes = ['image/png', 'image/jpg', 'image/jpeg', 'image/gif'];
69			if (imagesFileTypes.indexOf(file.type) != -1) {
70			file.previewElement.querySelector('.media-item-file-details').style.display = 'none';
71			} else if (file.type === 'application/pdf') {
72			file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
73			file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-pdf"></i>';
74			} else if (file.type === 'application/doc' \| 'application/docx') {
75			file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
76			file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-word"></i>';
77			} else if (file.type === 'application/ppt' \| 'application/pptx') {
78			file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
79			file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-powerpoint"></i>';
80			} else if (file.type === 'video/mp4' \| 'video/webm' \| 'video/mkv') {
81			file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
82			file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-video"></i>';
83			} else if (file.type === 'audio/mpeg') {
84			file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
85			file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-audio"></i>';
86			} else {
87			file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
88			file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file"></i>';
89			}
90			});
91
92			dropzoneCards.on("success", function (file, resp) {
93			file.previewElement.querySelector(".media-list-item").classList.remove('uploading');
94			file.previewElement.querySelector(".upload-progress").style.display = 'none';
95			file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
96			});
97
98			dropzoneCards.on("error", function (file) {
99			file.previewElement.querySelector(".media-list-item").classList.remove('uploading');
100			file.previewElement.querySelector(".upload-progress").style.display = 'none';
101			file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
102			});
103			}
104
105			// Table version
106			const dropzoneTable = $('#dropzone-table');
107			if(dropzoneTable.length) {
108
109			let dropzoneTableActionUrl = dropzoneTable.data('action-url');
110
111			let dropzoneTableFilePreview = dropzoneTableElement.find('#dropzone-table-template');
112			dropzoneTableFilePreview.removeAttr('id');
113
114			let dropzoneTableFilePreviewTemplate = dropzoneTableFilePreview.parent().html();
115			dropzoneTableFilePreview.parent().remove();
116
117			let dropzoneTable = new Dropzone('#dropzone-table-form', {
118			url: dropzoneTableActionUrl,
119			autoProcessQueue: false,
120			thumbnailWidth: null,
121			thumbnailHeight: null,
122			previewTemplate: dropzoneTableFilePreviewTemplate, // Define the container to display the previews
123			previewsContainer: ".media-list-table",
124			clickable: "#dropzone-add-file", // Define the element that should be used as click trigger to select files.
125			});
126
127			dropzoneTable.on("addedfile", function (file) {
128			console.log('test');
129			var imagesFileTypes = ['image/png', 'image/jpg', 'image/jpeg', 'image/gif'];
130			if (imagesFileTypes.indexOf(file.type) != -1) {
131			file.previewElement.querySelector('.media-item-file-details').style.display = 'none';
132			} else if (file.type === 'application/pdf') {
133			file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
134			file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-pdf"></i>';
135			} else if (file.type === 'application/doc' \| 'application/docx') {
136			file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
137			file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-word"></i>';
138			} else if (file.type === 'application/ppt' \| 'application/pptx') {
139			file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
140			file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-powerpoint"></i>';
141			} else if (file.type === 'video/mp4' \| 'video/webm' \| 'video/mkv') {
142			file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
143			file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-video"></i>';
144			} else if (file.type === 'audio/mpeg') {
145			file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
146			file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-audio"></i>';
147			} else {
148			file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
149			file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file"></i>';
150			}
151			// Hookup the start button
152			file.previewElement.querySelector(".start").onclick = function() { dropzoneTable.enqueueFile(file); };
153			});
154
155			dropzoneTable.on("totaluploadprogress", function(progress) {
156			document.querySelector("#dropzone-table-total-progress .progress-bar").style.width = progress + "%";
157			});
158
159			dropzoneTable.on("sending", function(file) {
160			// Show the total progress bar when upload starts
161			document.querySelector("#dropzone-table-total-progress").style.opacity = "1";
162			// And disable the start button
163			file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
164			});
165
166			dropzoneTable.on("success", function (file, resp) {
167			file.previewElement.querySelector(".upload-progress").style.display = 'none';
168			file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
169			});
170
171			dropzoneTable.on("error", function (file) {
172			file.previewElement.querySelector(".upload-progress").style.display = 'none';
173			file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
174			});
175
176			dropzoneTable.on("queuecomplete", function(progress) {
177			document.querySelector("#dropzone-table-total-progress").style.opacity = "0";
178			});
179
180			// Setup the buttons for all transfers
181			// The "add files" button doesn't need to be setup because the config
182			// `clickable` has already been specified.
183			document.querySelector("#dropzone-table-actions .start").onclick = function() {
184			dropzoneTable.enqueueFiles(dropzoneTable.getFilesWithStatus(Dropzone.ADDED));
185			};
186
187			document.querySelector("#dropzone-table-actions .cancel").onclick = function() {
188			dropzoneTable.removeAllFiles(true);
189			};
190			}
191			}
192			}
193
194			initDropify(){
195			$('.dropify').dropify();
196			}
197			}

o2system / venus-form

GitHub Access Token became invalid

Push — master ( 84f40e...d13fa5 )

Upload.js ➔ initDropzone B

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like